<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			button{font-size:26px;margin-top: 20px;}
			body{background-image: url(img/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>
		<button type="button" id="btn1"/>按钮一</button>
		<button type="button" id="btn2"/>按钮二</button>
		<button type="button" id="btn3"/>按钮三</button>
		
		<hr />
		<img id="mytank" src="img/right.png"/>
		<script type="text/javascript">
			//179000629徐阳光
			
			//按钮一
			let btn1 = document.getElementById("btn1");
			btn1.onclick = function(){
				alert("javascript事件测试");
			}
			
			//按纽二 双击文字改变
			let btn2 = document.getElementById("btn2");
			btn2.ondblclick = function(){
				btn2.innerHTML = "按钮二测试";
			}
			
			//按钮三 鼠标移动 按钮文字变色 单击显示文字
			let btn3 = document.getElementById("btn3");
			btn3.onmouseover = function(){
				btn3.style.backgroundColor = "red";
				btn3.style.color = "white";
			}
			btn3.onclick = function(){
				alert("javascript事件测试三");
			}
			
			// 上下左右：38 40 37 39
			var mytank = document.getElementById('mytank');
			
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					if(e.keyCode == 37){//左移动
						mytank.style.left = (mytank.offsetLeft-10)+'px'; 
					}
				});
			
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					if(e.keyCode == 38){//上移动
						mytank.style.top = (mytank.offsetTop-10)+'px'; 
					}
				});	
				
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					if(e.keyCode == 39){//右移动
						mytank.style.left = (mytank.offsetLeft+10)+'px'; 
					}
				});
			
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					if(e.keyCode == 40){//下移动
						mytank.style.top = (mytank.offsetTop+10)+'px'; 
					}
				});
		</script>
	</body>
</html>
